<template>
	<view class="strategy">
		<u-navbar
			back-text="攻略"
			:back-icon-size="0"
			:back-text-style="{
				color: '#101010',
				fontSize: '32rpx'
			}"
			:background="{
				background: 'transparent'
			}"
			:border-bottom="false"
		></u-navbar>
		<view class="">
			<u-tabs :list="list" :is-scroll="false" active-color="#F5222D" inactive-color="#101010" bg-color="transparent" :current="current" @change="change"></u-tabs>
		</view>
		<view class="" v-if="current === 2">
			<view class="" style="margin-top: 40rpx;">
				<u-subsection :list="sublist" active-color="#F5222D" inactive-color="#101010" :current="subindex" @change="sectionChange"></u-subsection>
			</view>
			<view class="newslist" v-if="newsList.length > 0">
				<block v-for="(v, k) in newsList" :key="k">
					<view class="newsli">
						<view class="top u-flex u-row-between u-col-center">
							<view class="redbg"><u-icon name="bell-fill" color="#ffffff" :size="48"></u-icon></view>
							<view class="u-flex-1">
								<view class="title">{{ v.title }}</view>
								<view class="time">{{ v.add_time }}</view>
							</view>
						</view>
						<view class="content">{{ v.content }}</view>
					</view>
				</block>
				<u-loadmore :status="status" margin-top="25" />
			</view>
			<view v-else class="nodata u-flex-1 u-flex u-row-center u-col-center" style="margin-top: 240rpx;">
				<view class="" style="text-align: center;">
					<image src="/static/imgs/nodata.png" mode="" style="width: 322rpx;height: 330rpx;"></image>
					<view class="" style="color: #919191;">暂无系统通知</view>
				</view>
			</view>
		</view>
		<view class="" v-if="current === 1">
			<view class="">
				<view class="issuebox">
					<block v-for="(v, k) in issueList" :key="k">
						<view class="issueli u-flex u-row-between u-col-top">
							<view class="issueleft">
								<image :src="v.icon" mode="" style="width: 44rpx;height: 44rpx;color: red;"></image>
								<view class="" style="color: #101010;font-size: 24rpx;font-weight: 600;">{{ v.class_name }}</view>
							</view>
							<view class="issueright u-flex-1">
								<block v-for="(s, k2) in issueList[k].question" :key="s.id">
									<view class="" :style="{ paddingTop: k2 === 0 ? '0' : '20rpx' }" @click="gosolve(s)">
										<view class="" style="color: #101010;font-size: 26rpx;font-weight: 600;">{{ s.title }}</view>
										<u-line v-if="k2 !== issueList[k].question.length - 1" color="rgba(0, 0, 0, 0.08)" margin="20rpx 0 0 0"></u-line>
									</view>
								</block>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="" v-if="current === 0">
			<view class="">
				<view class="tenpro u-flex u-row-between u-col-center" @click="goten">
					<view class="u-flex-1">
						<view class="title">
							<text style="color: #FFFB8F;">新人必看</text>
							<text>的十大问题</text>
						</view>
						<view class="clicks">
							<text>点击查看</text>
							<u-icon name="arrow-right" color="#FBFBFB" :size="32"></u-icon>
						</view>
					</view>
					<view class=""><image src="../../static/imgs/tenpro.png" mode="" style="width: 208rpx;height: 152rpx;"></image></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'strategy',
	data() {
		return {
			problemPage: 1,
			page: 1,
			issueList: [
				// {
				// 	icon: '',
				// 	class_name: '测试',
				// 	question: [
				// 		{
				// 			title: '测试问题1', //问题标题
				// 			id: 2 //问题id
				//          icon:'',
				//          id:''
				// 		}
				// 	]
				// }
			],
			status: 'loadmore',
			newsList: [
				// {
				// 	title: '测试标题', //标题
				// 	add_time: '2021-01-14 11:51:31', //时间
				// 	content: '测试内容' //内容
				// }
			],
			subindex: 0,
			sublist: [
				{
					name: '官方消息'
				},
				{
					name: '系统消息'
				}
			],
			list: [
				{
					name: '新人上手'
				},
				{
					name: '常见问题'
				},
				{
					name: '通知消息'
				}
			],
			current: 2
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {
		this.getMsgList();
	},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	onReachBottom() {
		this.status = 'loading';
		if (this.current === 0) {
			this.page = ++this.page;
			this.getMsgList();
		} else {
			this.problemPage = ++this.problemPage;
		}
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		goten() {
			uni.navigateTo({
				url: '/pages/strategy/FAQ'
			});
		},
		gosolve(item) {
			uni.navigateTo({
				url: '/pages/strategy/solve?id=' + item.id
			});
		},
		gettrue(array, key, value) {
			for (let i = 0; i < array.length; i++) {
				if (array[i][key] === value) {
					// console.log('array[i][key]', array[i][key]);
					return true;
				}
			}
			return false;
		},
		getProblemList() {
			this.$u.api
				.getProblemList({
					page: this.problemPage,
					pagesize: 20
				})
				.then(res => {
					console.log('常见问题', res);
					let arr = res.data.data;
					// let arr = this.question;
					for (let i = 0; i < arr.length; i++) {
						if (this.issueList.length > 0) {
							for (let j = 0; j < this.issueList.length; j++) {
								if (this.issueList[j].class_name === arr[i].class_name) {
									if (this.gettrue(this.issueList[j].question, 'id', arr[i].id)) {
									} else {
										this.issueList[j].question.push(arr[i]);
									}
								} else {
									if (this.gettrue(this.issueList, 'class_name', arr[i].class_name)) {
									} else {
										let obj2 = {
											class_name: arr[i].class_name, //分类名称
											icon: arr[i].icon, //分类图标
											question: []
										};
										obj2.question.push(arr[i]);
										this.issueList.push(obj2);
									}
								}
							}
						} else {
							let obj = {
								class_name: arr[0].class_name, //分类名称
								icon: arr[0].icon, //分类图标
								question: []
							};
							obj.question.push(arr[0]);
							this.issueList.push(obj);
							console.log('1', i, this.issueList);
							continue;
						}
					}
					console.log('issueList', this.issueList);
				})
				.catch(err => {
					console.log(err);
				});
		},
		sectionChange(index) {
			this.subindex = index;
			this.newsList = [];
			this.getMsgList();
		},
		getMsgList() {
			this.$u.api
				.getMsgList({
					page: this.page,
					pagesize: 20,
					status: this.subindex
				})
				.then(res => {
					console.log(res);
					if (res.data.data.length === 0) {
						this.status = 'nomore';
					}
					this.newsList.push(...res.data.data);
				})
				.catch(err => {
					console.log(err);
				});
		},
		change(index) {
			this.current = index;
			switch (index) {
				case 0:
					this.getMsgList();
					break;
				case 1:
					this.getProblemList();
					break;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.strategy {
	.newslist {
		margin: 40rpx 20rpx;
		.newsli {
			background-color: #ffffff;
			padding: 26rpx 34rpx;
			border-radius: 12rpx;
			margin-top: 36rpx;
			.top {
				.redbg {
					width: 76rpx;
					height: 76rpx;
					border-radius: 100rpx;
					background-color: red;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
				}
				.title {
					color: #101010;
					font-size: 26rpx;
				}
				.time {
					color: #919191;
					font-size: 24rpx;
				}
			}
			.content {
				margin-top: 26rpx;
				min-height: 208rpx;
				color: #404040;
				font-size: 24rpx;
			}
		}
	}
	.issuebox {
		margin: 46rpx 20rpx;
		.issueli {
			padding: 24rpx 44rpx;
			border-radius: 12rpx;
			background-color: #ffffff;
			margin-top: 40rpx;
			.issueleft {
				width: 70rpx;
				// height: 80rpx;
				text-align: center;
				margin-right: 16rpx;
			}
		}
	}
	.tenpro {
		background-color: #2e5882;
		border-radius: 16rpx;
		padding: 40rpx;
		margin: 40rpx 20rpx;
		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #ffffff;
			margin-bottom: 28rpx;
		}
		.clicks {
			width: 190rpx;
			height: 54rpx;
			border: 100rpx;
			font-size: 28rpx;
			border-radius: 100rpx;
			background-color: #498aca;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
		}
	}
}
</style>
